<!DOCTYPE html>
<!--suppress HtmlUnknownAttribute -->
<html lang="zh-Hans-CN" xmlns:th="http://www.thymeleaf.org">
<head>
  <th:block th:include="include :: header"/>
  <link th:href="@{/admin/css/other/center.css}" rel="stylesheet"/>
  <title>个人中心</title>
  <style>
    .layui-form-item {
      margin-top: 17px !important;
      margin-bottom: 17px !important;
    }
  </style>
</head>
<body class="pear-container">
<div class="layui-row layui-col-space10">
  <div class="layui-col-md3">
    <div class="layui-card">
      <div class="layui-card-body" style="padding: 25px;">
        <div class="text-center layui-text">
          <h2 style="padding-top: 20px;font-size: 20px;" th:text="${userInfo.realName}"></h2>
          <p style="padding-top: 8px;margin-top: 10px;font-size: 13px;"
             th:text="${userInfo.remark}">暂无描述</p>
        </div>
      </div>
    </div>
    <div class="layui-card">
      <div class="layui-card-header">
        登录记录
      </div>
      <div class="layui-card-body">
        <ul class="list">
          <li class="list-item" th:each="log:${logs}">
            <span class="title" th:text="${log.title}"></span>
            <span class="footer" th:text="${#temporals.format(log.createTime, 'yyyy-MM-dd HH:mm')}"></span>
          </li>
        </ul>
      </div>
    </div>
  </div>
  <div class="layui-col-md9">
    <div class="layui-card">
      <div class="layui-card-header">个人信息</div>
      <div class="layui-card-body">
        <div class="layui-tab layui-tab-brief">
          <div class="layui-tab-content">
            <div class="layui-tab-item layui-show">
              <form class="layui-form">
                <div class="layui-form-item layui-hide">
                  <label class="layui-form-label">编号</label>
                  <div class="layui-input-block">
                    <!--suppress HtmlFormInputWithoutLabel -->
                    <input autocomplete="off" class="layui-input" lay-verify="title" name="userId"
                           placeholder="请输入标题" th:value="${userInfo.userId}" type="text">
                  </div>
                </div>
                <div class="layui-form-item">
                  <label class="layui-form-label">账号</label>
                  <div class="layui-input-block">
                    <!--suppress HtmlFormInputWithoutLabel -->
                    <input autocomplete="off" class="layui-input" lay-verify="title" name="username"
                           placeholder="请输入标题" readonly th:value="${userInfo.username}" type="text">
                  </div>
                </div>
                <div class="layui-form-item">
                  <label class="layui-form-label">姓名</label>
                  <div class="layui-input-block">
                    <!--suppress HtmlFormInputWithoutLabel -->
                    <input autocomplete="off" class="layui-input" lay-verify="title" name="realName"
                           placeholder="请输入标题" th:value="${userInfo.realName}" type="text">
                  </div>
                </div>
                <div class="layui-form-item">
                  <label class="layui-form-label">邮箱</label>
                  <div class="layui-input-block">
                    <!--suppress HtmlFormInputWithoutLabel -->
                    <input autocomplete="off" class="layui-input" lay-verify="title" name="email"
                           placeholder="请输入标题" th:value="${userInfo.email}" type="text">
                  </div>
                </div>
                <div class="layui-form-item">
                  <label class="layui-form-label">电话</label>
                  <div class="layui-input-block">
                    <!--suppress HtmlFormInputWithoutLabel -->
                    <input autocomplete="off" class="layui-input" lay-verify="title" name="phone"
                           placeholder="请输入标题" th:value="${userInfo.phone}" type="text">
                  </div>
                </div>
                <div class="layui-form-item layui-form-text">
                  <label class="layui-form-label">描述</label>
                  <div class="layui-input-block">
                    <!--suppress HtmlFormInputWithoutLabel -->
                    <textarea class="layui-textarea" name="details" placeholder="请输入描述"
                              th:text="${userInfo.remark}"></textarea>
                  </div>
                </div>
                <div class="layui-form-item">
                  <div class="layui-input-block">
                    <button class="pear-btn pear-btn-primary pear-btn-sm" lay-filter="user-update"
                            lay-submit>修改资料
                    </button>
                    <button class="pear-btn pear-btn-sm edit-password">更改密码</button>
                  </div>
                </div>
              </form>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<th:block th:include="include :: footer"/>
<script th:inline="javascript">
  layui.use(['element', 'jquery', 'layer', 'form', 'convert'], function () {
    let $ = layui.jquery;
    let layer = layui.layer;
    let form = layui.form;

    $(".edit-password").click(function () {
      layer.open({
        type: 2,
        title: '修改密码',
        shade: 0.1,
        area: ['550px', '280px'],
        content: '/system/user/editPassword'
      });
      return false;
    })

    form.on('submit(user-update)', function (data) {
      $.ajax({
        url: '/system/user/updateInfo',
        data: JSON.stringify(data.field),
        dataType: 'json',
        contentType: 'application/json',
        type: 'put',
        success: function (result) {
          if (result.success) {
            layer.msg("修改成功", {icon: 1, time: 1000});
          } else {
            layer.msg("修改失败", {icon: 2, time: 1000});
          }
        }
      })
      return false;
    });
  })
</script>
</body>
</html>
